<template>
    <div>
      <el-container>
        <el-header>
          <first-header></first-header>
        </el-header>
        <el-container>
          <el-aside width="200px">
            <Aside  :list = 'list'
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.2)"
            ></Aside>
          </el-aside>
          <el-main class="el-main_s">
            <el-container>
              <el-header class="second_header">
                <second-header></second-header>
              </el-header>
              <el-main style="padding: 40px 0 20px 0">

                <transition name="page-switching" mode="out-in">
                  <!--<keep-alive>  &lt;!&ndash;确保上次操作的dom跳转页面后不刷新&ndash;&gt;-->
                    <router-view></router-view>
                  <!--</keep-alive>-->
                </transition>

              </el-main>
            </el-container>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>
  import firstHeader from "./heard/firstHeard"
  import secondHeader from "./heard/secondHeard"
  import Aside from "./aside/aside"
  import bus from "../assets/js/busEvevt"
    export default {
        data() {
            return {
              loading:true,
              list:[],
            }
        },
        components: {
          firstHeader,
          secondHeader,
          Aside
        },
      methods:{
          initFn:function () {
            let data = {};
            let str = this.encryptionAesRsa(data);
            let encryptData = str.split('%$#@zjt@#$%')[0];
            let encryptKey = str.split('%$#@zjt@#$%')[1];
            let incomData = {
              map:'admin_user_menu',
              plum_session_api:localStorage.getItem('token'),
              encryptData:encryptKey,
              encryptKey:encryptData
            };
            this.$http.post('',incomData).then((data)=>{
              if(data.ec==200){
                this.loading = false;
                this.list = data.data.menu;
                let str = data.data.button_menu;
                str = this.encryptButton(str);
                localStorage.setItem('buttonMenu',str)
              }else if(data.ec==401){
                this.$message.error(data.em);
                setTimeout(()=>{
                  this.exitLogin();
                },1500)
              }else {
                this.$message.error(data.em);
              }
            }).catch((err)=>{
              this.$message.error('error!');
            })
          }
      },
      mounted() {
        bus.$on('isCollapse',(msg) => {
          let elAside = document.getElementsByClassName('el-aside')[0];
          let elAsides = document.getElementsByClassName('el-main_s')[0];
          if(msg){
            elAside.style.width = '65px';
            elAsides.style.left = '65px'
          }else {
            elAside.style.width = '200px';
            elAsides.style.left = '200px'
          }
        });
        this.initFn()
      },
    }
</script>

<style scoped>
  .el-header, .el-footer {
    background-color: #F56C6C;
    color: #ffffff;
    line-height: 60px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
  }
  .el-aside {
    color: #ffffff;
    background-color: rgb(50, 64, 87);
    border: none;
    list-style: none;
    height: 100%;
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: left .38s
  }
  .el-main_s {
    bottom: 0;
    left: 200px;
    position: absolute;
    right: 0;
    top: 60px;
    background-color: #E9EEF3;
    color: #333;
    transition: left .38s
  }
  .page-switching-enter-active, .page-switching-leave-active {
    transition: opacity .38s
  }
  .page-switching-enter, .page-switching-leave-active{
    opacity: 0
  }
  /*改变导航栏样式*/
  ::-webkit-scrollbar{
    width: 1px;
    height: 1px;
    background-color:#E9EEF3;
  }

  ::-webkit-scrollbar-thumb {
    cursor: pointer;
    border-radius: 1px;
    background-color:#E9EEF3;
  }
  .second_header{
    background-color: #fff;
    color: #000;
    line-height: 43px;
    height: 43px !important;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    border-bottom: 1px solid #e4e7ed;
  }
</style>
